<template>
    <div class="common-page page-stats-article-sjwt" v-loading.fullscreen="loading">
        <div class="common-page__head">
            <!-- <comp-paths class="route" :paths="['/stats', $route.fullPath]"></comp-paths> -->
            <div class="title">
                <div class="text">{{ $options.title }}</div>
                <el-date-picker type="date" v-model="startTime" size="small" style="margin-right: 12px; width: 200px" format="起始yyyy年M月d日" value-format="timestamp" placeholder="起始日期" :readonly="loading" @change="search()"></el-date-picker>
                <el-date-picker type="date" v-model="endTime" size="small" style="margin-right: 12px; width: 200px" format="截止yyyy年M月d日" value-format="timestamp" placeholder="截止日期" :readonly="loading" @change="search()"></el-date-picker>
                  <el-button
        style="width: 100px;  float: right"
        type="primary"
        size="small"
        @click="exportExcel"
        >导出Excel</el-button
      >
            </div>
        </div>
        <div class="common-page__body page-stats-article-policy__body">
            <!-- <div class="row">
                <div class="col  col--2em">序号</div>
                <div class="col">政策分类</div>
                <div class="col col--4em">已发布</div>
            </div>
            <div class="row" v-for="(tag, index) in tagList" :key="tag.id">
                <div class="col col--2em">{{ index + 1 }}</div>
                <div class="col">{{ tag.name }}</div>
                <div class="col col--4em">{{ tag.stats.articlesTotal }}</div>
            </div>
            <div class="row">
                <div class="col col--2em">-</div>
                <div class="col">总计</div>
                <div class="col col--4em">{{ articlesTotal }}</div>
            </div> -->
      

      <table id="exportTable" style="width: 60vw">
        <thead>
          <tr>
            <th colspan="2" rowspan="2">序号</th>
            <th colspan="2" rowspan="2">设区市</th>
            <th colspan="2">自治区层面</th>
            <th colspan="2">市级层面</th>
            <th colspan="2">县级层面</th>
            <th colspan="2">分市小计</th>
          </tr>
          <tr>
            <th>总数</th>
            <th>已办结</th>
            <th>总数</th>
            <th>已办结</th>
            <th>总数</th>
            <th>已办结</th>
            <th>总数</th>
            <th>已办结</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(tag, index) in tagList" :key="index">
            <td colspan="2">{{ index + 1 }}</td>

            <td colspan="2">{{ tag.dyfwz }}</td>
            <td>{{ tag.zzqzs }}</td>
            <td>{{ tag.zzqybj }}</td>
            <td>{{ tag.sjcmzs }}</td>
            <td>{{ tag.sjcmybj }}</td>
            <td>{{ tag.xjcmzs }}</td>
            <td>{{ tag.xjcmybj }}</td>
            <td>{{ tag.fzxjzs }}</td>
            <td>{{ tag.fzxjybj }}</td>
          </tr>
          <tr>
            <td colspan="2">-</td>

            <td colspan="2" style="font-size: 14px; font-weight: 600">小计</td>
            <td>{{ XJzzqzs }}</td>
            <td>{{ XJzzqbjzs }}</td>
            <td>{{ XJsjzs }}</td>
            <td>{{ XJsjzsbj }}</td>
            <td>{{ XJxjzs }}</td>
            <td>{{ XJxjzsbj }}</td>
            <td>{{ XJhjzs }}</td>
            <td>{{ XJhjzsbj }}</td>
          </tr>
          <tr>
            <td colspan="2">-</td>

            <td colspan="2" style="font-size: 14px; font-weight: 600">
              问题总数
            </td>
            <td colspan="8" style="font-size: 14px; font-weight: 600">
              {{ XJhjzs }}
            </td>
          </tr>
          <tr>
            <td colspan="2">-</td>

            <td colspan="2" style="font-size: 14px; font-weight: 600">
              已办结问题总数
            </td>
            <td colspan="8" style="font-size: 14px; font-weight: 600">
              {{ XJhjzsbj }}
            </td>
          </tr>
        </tbody>
      </table>
        </div>
    </div>
</template>

<script>
    import mixin from "../mixin";
import XLSX from "xlsx";

    import { string, int } from "../util";
    export default {
        name: "page-stats-article-qqdy",
        title: "全区调研服务收集问题办理情况",
        nodes: ["/menu/stats"],
        childs: [],
        mixins: [mixin],
        data: () => ({
            loading: false,
            startTime: null,
            endTime: null,
            tagList: [],
            articlesTotal: 0,
            XJzzqzs: 0,
            XJzzqbjzs: 0,
            XJsjzs: 0,
            XJsjzsbj: 0,
            XJxjzs: 0,
            XJxjzsbj: 0,
            XJhjzs: 0,
            XJhjzsbj: 0,
            
        }),
        methods: {
            exportExcel() {
      const table = document.getElementById("exportTable");
      const ws = XLSX.utils.table_to_sheet(table);

      // 设置单元格样式
      const range = XLSX.utils.decode_range(ws["!ref"]);
      for (let R = range.s.r; R <= range.e.r; ++R) {
        for (let C = range.s.c; C <= range.e.c; ++C) {
          const cellRef = XLSX.utils.encode_cell({ r: R, c: C });
          const cell = ws[cellRef];
          if (!cell) {
            continue;
          }
          cell.s = {
            alignment: {
              horizontal: "right",
              vertical: "center",
            },
          };
        }
      }
      // 自适应内容

      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      XLSX.writeFile(wb, "全区调研服务收集问题办理情况表.xlsx");
    },
            search(clean) {
                if (this.loading) return;
                if (clean) this.tagList = [];
                let startTime = this.startTime;
                let endTime = this.endTime;
                   if(this.startTime||this.endTime){
                    if(this.startTime < 1704038400000 && this.endTime <1704038400000){
                        this.startTime= 1686153600000;
                        startTime= 1686153600000;
                        this.endTime = 1703952000000;
                        endTime = 1703952000000;
                      
                    } 
                }
                this.loading = true;
                this.plugins.user.getStatsArticleQqdy({ startTime, endTime }).then((res) => {
                    this.loading = false;
                     console.log(res);
                    //  return
                    if (res.code === 0) {
                        this.tagList = res.data.map((data) => ({
                            
                            dyfwz: string(data.sqs),
                            fzxjybj: string(data.fzxjybj),
                            fzxjzs: string(data.fzxjzs),
                            sjcmybj: string(data.sjcmybj),
                            sjcmzs: string(data.sjcmzs),
                            xjcmybj: string(data.xjcmybj),
                            xjcmzs: string(data.xjcmzs),
                            zzqybj: string(data.zzqcmybj),
                            zzqzs: string(data.zzqcmzs), 
                            // stats: {
                            //     articlesTotal: int(data.statistics),
                            // },
                        }));
                        this.XJzzqzs = this.tagList.reduce((total, tag) => total + Number(tag.zzqzs), 0);
                        this.XJzzqbjzs = this.tagList.reduce((total, tag) => total + Number(tag.zzqybj), 0);

                        this.XJsjzs = this.tagList.reduce((total, tag) => total + Number(tag.sjcmzs), 0); 
                        this.XJsjzsbj = this.tagList.reduce((total, tag) => total + Number(tag.sjcmybj), 0); 

                        this.XJxjzs = this.tagList.reduce((total, tag) => total + Number(tag.xjcmzs), 0); 
                        this.XJxjzsbj = this.tagList.reduce((total, tag) => total + Number(tag.xjcmybj), 0); 

                        this.XJhjzs = this.tagList.reduce((total, tag) => total + Number(tag.fzxjzs), 0); 
                        this.XJhjzsbj = this.tagList.reduce((total, tag) => total + Number(tag.fzxjybj), 0); 

                    } else {
                        this.plugins.modal.toast("加载失败<br>" + res.code + "：" + res.msg, "error");
                    }
                });
            },
            destroy() {
                if (this.loading) return;
                return true;
            },
            init() {
                if (this.loading) return;
                this.loading = true;
                this.$root.$refs.navbar.init();
                this.plugins.user.call(async () => {
                    let res = await this.plugins.user.init();
                    if (res.code === 0) { }
                    return res;
                }, async () => {
                    if (this.access(this.$route.name)) return { code: 0 };
                    return this.env.xhrErrors.find((error) => error.code === 4);
                }).then((res) => {
                    this.loading = false;
                    this.$root.$refs.navbar.init();
                    if (res.code === 0) {
                        this.search();
                    } else if (res.code === 2) {
                        this.$root.$refs.navbar.login();
                    } else {
                        this.plugins.modal.alert("页面加载失败", res.code + "：" + res.msg, "error").then(() => this.$router.replace("/home"));
                    }
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .page-stats-article-sjwt {
        overflow: hidden;
    }

    .page-stats-article-policy__body {
        display: flex;
        flex-direction: column;

        & > .row {
            flex: 0 0 auto;
            display: flex;
            width: 640px;

            & > .col {
                flex: 1 1 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: 0 2px 2px 0;
                padding: 8px 9px;
                color: #333;
                font-size: 14px;
                line-height: 16px;
                text-align: center;
                background-color: #f6f6f6;

                & > .key {
                    color: #1677ff;
                }
            }

            & > .col--click {
                cursor: pointer;
            }

            & > .col--2em {
                flex: 0 0 auto;
                width: 2em;
            }

            & > .col--3em {
                flex: 0 0 auto;
                width: 3em;
            }

            & > .col--4em {
                flex: 0 0 auto;
                width: 4em;
            }

            &:first-child {
                & > .col {
                    font-weight: bold;
                }
            }
        }
    }
     table {
    border-collapse: collapse;
    border: 2px solid #FFFFFF;
  }
  th, td {
    border: 2px solid #FFFFFF;
    padding: 8px;
    text-align: center;
  }
    th,td {
    background-color: #F6F6F6;
    
}
td{
    font-size: 12px;
    
}
</style>